"use client"

import type React from "react"

import Image from "next/image"
import Link from "next/link"
import { UserPlus } from "lucide-react"
import type { UserFollower, UserFollowing } from "@/types/user"
import { cn } from "@/lib/utils"

interface UserCardProps {
  user: UserFollower | UserFollowing
  onFollow?: (user: UserFollower | UserFollowing) => void
  className?: string
  showFollowButton?: boolean
}

export function UserCard({ user, onFollow, className, showFollowButton = true }: UserCardProps) {
  const handleFollow = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    if (onFollow) {
      onFollow(user)
    }
  }

  return (
    <Link
      href={`/profile/${user.id}`}
      className={cn(
        "group flex flex-col items-center gap-2 rounded-md p-2 text-center transition-colors hover:bg-muted/50",
        className,
      )}
    >
      <div className="relative h-24 w-24 overflow-hidden rounded-full">
        <Image
          src={user.avatar || "/placeholder.svg?height=96&width=96"}
          alt={user.username}
          fill
          className="object-cover transition-transform group-hover:scale-105"
        />
        {showFollowButton && (
          <button
            className="absolute bottom-0 left-1/2 -translate-x-1/2 rounded-full bg-primary px-3 py-1 text-xs font-medium text-primary-foreground opacity-0 transition-opacity group-hover:opacity-100"
            onClick={handleFollow}
          >
            <span className="flex items-center gap-1">
              <UserPlus size={14} />
              Follow
            </span>
          </button>
        )}
      </div>
      <div>
        <div className="font-medium">{user.username}</div>
        {user.followedAt && (
          <div className="text-xs text-muted-foreground">Since {new Date(user.followedAt).toLocaleDateString()}</div>
        )}
      </div>
    </Link>
  )
}

